import 'package:flutter/material.dart';
import 'package:myapp/widget/PPButtonView.dart';
import '../../widget/PPBaseWidget.dart';

class PPLoginPage extends StatefulWidget with PPBaseWidget {

    PPLoginPage(): super();

    _PPLoginPageState createState() => _PPLoginPageState();
}

class _PPLoginPageState extends State<PPLoginPage> {

    String mobile = "";
    String password = "";

    @override
    Widget build(BuildContext context) {
        return Container(
            alignment: Alignment.topLeft,
            color: Colors.green,
            child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                    PPButtonView(
                        btnWidth: 20,
                        btnHeight: 20,
                        btnMargin: EdgeInsets.fromLTRB(15, 44, 0, 0),
                        btnPadding: EdgeInsets.all(0),
                        btnChild: Container(
                            child: Image.asset("resource/images/block_nav_back_icon.png"),
                        ),
                        onPressedAction: _onBackAction,
                    ),
                    Container(
                        margin: EdgeInsets.only(top: 20),
                        color: Colors.red,
                        alignment: Alignment.center,
                        child: Stack(
                            alignment: Alignment.topCenter,
                            children: <Widget>[
                                Container(
                                    margin: EdgeInsets.fromLTRB(20, 10, 20, 20),
                                    padding: EdgeInsets.all(10),
                                    child: Text("绝对布局的使用: Stack 和 Positioned 相结合", style: TextStyle(fontSize: 16, color: Colors.white, letterSpacing: 1, decoration: TextDecoration.none)),
                                ),
                                Container(
                                    margin: EdgeInsets.fromLTRB(15, 80, 15, 40),
                                    padding: EdgeInsets.all(20),
                                    decoration: BoxDecoration(
                                        color: Colors.white,
                                        borderRadius: BorderRadius.circular(10),
                                        border: Border.all(color: Color.fromRGBO(63, 227, 206, 1), width: 1, style: BorderStyle.solid)
                                    ),
                                    height: 240,
                                ),
                                Positioned(
                                    top: 60,
                                    left: MediaQuery.of(context).size.width /2.0 - 60, 
                                    width: 120,
                                    height: 40,
                                    child: Container(
                                        padding: EdgeInsets.all(10),
                                        color: Colors.blue,
                                        alignment: Alignment.center,
                                        child: Text("绝对布局", style: TextStyle(fontSize: 13, color: Color.fromRGBO(54, 64, 84, 1), decoration: TextDecoration.none)),
                                    )
                                ),
                                Positioned(
                                    bottom: 20,
                                    left: MediaQuery.of(context).size.width /2.0 - 60,
                                    width: 120,
                                    height: 40,
                                    child: Container(
                                        padding: EdgeInsets.all(10),
                                        color: Colors.blue,
                                        alignment: Alignment.center,
                                        child: Text("绝对布局", style: TextStyle(fontSize: 13, color: Color.fromRGBO(54, 64, 84, 1), decoration: TextDecoration.none)),
                                    )
                                )
                            ],
                        )
                    ),
                    PPButtonView(
                        btnMargin: EdgeInsets.fromLTRB(15, 30, 15, 0),
                        btnDecoration: BoxDecoration(color: Color(0xFF468CFF), borderRadius: BorderRadius.circular(3)),
                        btnChild: Container(
                            width: widget.getScreenWidth(context) - 30,
                            height: 44,
                            alignment: Alignment.center,
                            child: Text('登录', style: TextStyle(fontSize: 16, color: Colors.white)),
                        ),
                        onPressedAction: _onClickLoginButtonAction,
                    )   
                ],
            ),
        );
    }

    _onBackAction() {
        Navigator.pop(context);
    }

    _onClickLoginButtonAction() {

    }
}

//  #468CFF      #6EB9FF 